<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="" style="height: 120upx;">

		</view>
		<!-- <uni-notice-bar  show-icon :text="notice" /> -->
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<view class="carousel-money">
				{{wealth.invitation_code}}
			</view>
			<view class="carousel-text">
				推广码
			</view>
		</view>
		<view class="submit-box" @click="confirm" v-if="wealth.wealth_status==2">
			<text class="submit">
				{{wealth_pay_price}}
			</text>
		</view>
		<view class="order-title-box">
			<view class="order-title">
				<view class="order-title-item" :class="{ active : active1 }" @tap="version('1')">
					<text>下线人数({{list_count_people}}人)</text>
				</view>
				<view class="order-title-item" :class="{ active : active2 }" @tap="version('2')">
					<text>收益明细(￥{{money_balance}})</text>
				</view>
			</view>
		</view>
		
		<!-- 下线人数 -->
		<view class="" v-if="peopleList  && active1" >
			<view class="list" v-if="peopleList.length > 0">
				<view class="list-item" v-for="item in peopleList" :key="item.id" style="height: initial;">
					<view class="img-wrapper" style="height: initial;">
						<view class="img-wrapper-header" style="height: initial;padding: 20rpx 0;">
							<view class="img-wrapper-line1" style="height: initial;">
								<text>{{item.name}}</text>
								<text>{{item.createtime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
			</view>
		</view>
		
		<!-- 收益明细 -->
		<view class="" v-show="balanceList && active2">
			<view class="list" v-if="balanceList.length > 0">
				<view class="list-item" v-for="item in balanceList" :key="item.id" style="height: initial;">
					<view class="img-wrapper" style="height: initial;">
						<view class="img-wrapper-header" style="height: initial;padding: 20rpx 0;">
							<view class="img-wrapper-line1" style="height: initial;">
								<text>商品名：{{item.products_name}}</text>
								<text>￥{{item.products_price}}</text>
							</view>
							<view class="img-wrapper-line1">
								<text>用户名：{{item.name}}</text>
								<text>{{item.money}}</text>
							</view>
							<view class="img-wrapper-line2">
								<text class="addtime">{{item.createtime}}</text>
								<text style="color: #333;font-size: 26rpx;">剩余金额： {{item.after}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<image src="/static/images/zanwushuju.png" alt="" class="empty-img"></image>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {

		data() {
			return {
				title: '我的财富',
				
				cate: 1,
				hasmoney: '0.00',
				isShow: false,
				active1: true,
				active2: false,
				active3: false,
				peopleList:[
					// {
					// 	"id":"1",
					// 	"name":"张三",
					// 	"createtime":"2024-11-28 10:11:12",
					// },
					// {
					// 	"id":"1",
					// 	"name":"155****5666",
					// 	"createtime":"2024-11-28 10:11:12",
					// }
				],
				balanceList:[
					// {
					// 	"id":"1",
					// 	"name":"张三",
					// 	"products_id":"1",
					// 	"products_name":"商品1",
					// 	"products_price":"100",
					// 	"money":"+2",
					// 	"after":"3",
					// 	"createtime":"2024-11-28 10:11:12",
					// },
					// {
					// 	"id":"1",
					// 	"name":"张三",
					// 	"products_id":"1",
					// 	"products_name":"商品1",
					// 	"products_price":"100",
					// 	"money":"+1",
					// 	"after":"1",
					// 	"createtime":"2024-11-28 10:11:12",
					// }
				],
				list_count_people:"",
				list_count_money:"",
				money_balance:"",
				wealth:"",
				page:1,
				wealth_invitation_people_num:"",
				wealth_rate:"",
				notice:"开通方式: 1:邀请N人注册可开通 2:付费开通\n\r权益说明：可抽取下线每笔订单的N%金额",
				wealth_pay_price:"付费开通",
				openId:"",
				appid:"wx5f6ba2c4d12e2e1f",
				
			};
		},
		components: {

		},
		onReachBottom() {
			this.loadData()
		},
		async onLoad() {
			//判断是否登录
			// let result = this.$api.isLogin();
			// if (result === false) {
			// 	return false;
			// }
			this.loadData();
			
			
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.mobile = res.data.mobile
				}
			});
			
			// #ifdef H5
			if (this.$wechat && this.$wechat.isWechat()) {
				this.isWechat = true;
			
				//微信公众号登录
				if (!this.openId) {
					if (window.location.href.indexOf('?code=') !== -1 || window.location.href.indexOf('&code=') !== -1) {
						this.isPay = false;
						let code;
						if (window.location.href.indexOf('?code=') !== -1) {
							code = window.location.href.split('?code=')[1].split('&')[0];
						} else {
							code = window.location.href.split('&code=')[1].split('&')[0];
						}
						//请求后端网络请求
						this.getWxOpenId(code);
					}
				}
			}
			// #endif
			
			// #ifdef MP-WEIXIN
			this.isWechat = true;
			// #endif
		},
		methods: {
			async loadData() {
				uni.showLoading({
					title: '加载中...'
				});
				let token = uni.getStorageSync('token');
				let url = '/wealthInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: uni.getStorageSync('cate'),
						token: token,
						mobile:uni.getStorageSync('userInfo').mobile,
						list_type:this.active1?1:2,
						page:this.page
					},
					methods: 'post'
				})
				if(res.data.data.list.length){
					if(this.active1){
						if(this.peopleList.length){
							this.peopleList=this.peopleList.concat(res.data.data.list)
						}else{
							this.peopleList=res.data.data.list
						}
					}else if(this.active2){
						if(this.balanceList.length){
							this.balanceList=this.balanceList.concat(res.data.data.list)
						}else{
							this.balanceList=res.data.data.list
						}
					}
					this.page=this.page+1
					uni.hideLoading();
				}else{
					uni.showLoading({
						title: '没有更多数据了',
					});
					setTimeout(() => {
						uni.hideLoading();
					}, 600)
				}
				this.list_count_people=res.data.data.list_count_people
				this.list_count_money=res.data.data.list_count_money
				this.money_balance=parseFloat(res.data.data.wealth.money).toFixed(2);
				this.wealth = res.data.data.wealth;
				this.wealth_invitation_people_num = res.data.data.wealth_invitation_people_num;
				this.wealth_rate = res.data.data.wealth_rate;
				this.wealth_pay_price = "付费开通（￥"+res.data.data.wealth_pay_price+"）";
				if(this.wealth.wealth_status==3){
					this.notice="权益说明：可抽取下线每笔订单的"+this.wealth_rate+"金额"
				}else{
					this.notice="开通方式: 1:邀请"+this.wealth_invitation_people_num+"人注册可开通 2:付费开通\n\r权益说明：可抽取下线每笔订单的"+this.wealth_rate+"金额"
				}
			},

			async version(id) {
				if(id==1){
					this.active1 = true;
					this.active2 = false;
				}else if(id==2){
					this.active1 = false;
					this.active2 = true;
				}
				this.page=1;
				this.peopleList=[]
				this.balanceList=[]
				
				uni.showLoading({
					title: '加载中...'
				});
				this.loadData();
				setTimeout(() => {
					uni.hideLoading();
				}, 1500)
			},
			// 支付
			
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			
			async getOpenId1(code) {
				let res1 = await this.$myRequest({
					url: '/getAppletOpenId',
					data: {
						code: loginAuth.code
					},
					methods: 'post'
				})
			
				if (res.data.status == 1) {
					var openId = res1.data.data
					uni.request({
						url: 'https://test.hnliandesy.com/api/WealthCreateOrder',
						method: 'POST',
						data: {
							token: uni.getStorageSync('token'),
							uid: uni.getStorageSync('userInfo').uid,
							mobile: uni.getStorageSync('userInfo').mobile,
							cate: uni.getStorageSync('cate'),
							paytype: 2,
							type: 2,
							appid:openId
						},
						dataType: "json",
						success: (res) => {
							uni.showModal({
								title: '提示4',
								content: JSON.stringify(res),
								success: function (res) {
									// uni.requestPayment({
									// 	provider: provider,
									// 	appid: orderInfo.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
									// 	nonceStr: orderInfo.nonceStr, // 随机字符串
									// 	package: orderInfo.package, // 固定值
									// 	timeStamp: orderInfo.timeStamp, // 时间戳（单位：秒）
									// 	paySign: orderInfo.paySign, // 签名，这里用的 MD5/RSA 签名
									// 	signType: 'MD5',
									// 	success: (res) => {
									// 		// console.log(res)
									// 		// if(res.errMsg === 'requestPayment:ok') {
									// 		// 	fn1(res)
									// 		// }
									// 		resolve(res)
									// 	},
									// 	fail: (err) => {
									// 		// fn2(err)
									// 	}
									// });
								}
							});
							
						},
						fail: (err) => {
							uni.hideLoading();
							this.$api.msg('服务器开小差了呢，请您稍后再试');
						}
					})
				}
			},
			//确认支付
			confirm: async function() {
				// #ifdef H5
					//微信浏览器
					this.getAccessToken();
				// #endif
				// #ifdef APP-PLUS
					this.wxPay();
				// #endif
			},
			async getAccessToken() {
				//重点 这里getWxAppid这个是微信公众号的appid
				if (!this.openId) {
					window.location.href =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
						this.appid +
						'&redirect_uri=' + encodeURIComponent(
							'https://test.hnliandesy.com/h5/#/pages6/pages/wealth/wealth') +
						'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
				} else {
					this.confirmPay();
				}
			},
			async getWxOpenId(code) {
				let res = await this.$myRequest({
					url: '/getWxOpenId',
					data: {
						code: code
					}
				})
			
				this.openId = res.data.data.openid
				this.confirmPay();
			},
			async confirmPay() {
				uni.showLoading({
					title: '加载中'
				});
				let token = uni.getStorageSync('token');
				if (!token) {
					this.$api.msg('请重新登录', 'none'),
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
				}
				let dataObj = {
					token: uni.getStorageSync('token'),
					uid: uni.getStorageSync('userInfo').uid,
					mobile: uni.getStorageSync('userInfo').mobile,
					cate: uni.getStorageSync('cate'),
					paytype: 2,
					type: 2,
					openid: this.openId,
					appid: "wx5f6ba2c4d12e2e1f",
				}
			
				let res = await this.$myRequest({
					url: '/WealthCreateOrder',
					data: dataObj,
					methods: 'POST',
				})
			
				if (res.data.status == 2) {
					let info = res.data.data
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": info.appId, //公众号名称，由商户传入     
							"timeStamp": info.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": info.nonceStr, //随机串     
							"package": info.package,
							"signType": info.signType, //微信签名方式：     
							"paySign": info.paySign //微信签名 
						},
						(res) => {
							this.loadData();
			// 				if (res.err_msg == "get_brand_wcpay_request:ok") {
			// 					this.payMaskHide = true; // 隐藏当前支付方式选择
			
			// 					this.sendNotice(this.mobile)
			
			// 					uni.redirectTo({
			// 						url: '/pages/money/paySuccess'
			// 					})
			// 				} else {
			// 					this.$api.msg('支付失败！')
			// 					this.isPay = true;
			// 				}
						}
					)
				} else if (res.data.status == 1) {
			
					let paymentData = res.data.data;
					uni.requestPayment({
						timeStamp: paymentData.timeStamp,
						nonceStr: paymentData.nonceStr,
						package: paymentData.package,
						signType: 'MD5',
						paySign: paymentData.paySign,
						success: (res) => {
			
							this.sendNotice(this.mobile)
			
							uni.redirectTo({
								url: '/pages/money/paySuccess'
							})
						},
						fail: (res) => {
							this.$api.msg('支付失败！')
							this.isPay = true;
						}
					})
				} else {
					this.$api.msg('非法操作！')
				}
			
				uni.hideLoading()
			},
			//微信支付
			async wxPay() {
				let dataObj = {
					token: uni.getStorageSync('token'),
					uid: uni.getStorageSync('userInfo').uid,
					mobile: uni.getStorageSync('userInfo').mobile,
					cate: uni.getStorageSync('cate'),
					paytype: 2,
					type: 4,
					openid: this.openId,
					appid: "wx5f6ba2c4d12e2e1f",
				}
				uni.getProvider({
					service: 'payment',
					success: res => {
						if (~res.provider.indexOf('wxpay')) { //先判断用户是否有微信支付环境（是否安装了微信app）
							uni.showLoading({
								title: '正在调起微信支付'
							})
			
							uni.request({
								url: 'https://test.hnliandesy.com/api/WealthCreateOrder',
								method: 'POST',
								data: dataObj,
								dataType: "json",
								success: (res) => {
									// console.log(res)
									if (res.data.status == 4) {
										//（这里注意后端返回的数据类型是string还是object，需转成object类型）
										let resobj = res.data.data;
										// console.log(resobj)
										let payInfo = {
											appid: resobj.appid,
											noncestr: resobj.nonce_str,
											package: "Sign=WXPay",
											partnerid: resobj.mch_id,
											prepayid: resobj.prepay_id,
											timestamp: resobj.time_stamp,
											sign: resobj.sign,
										}
			
										uni.requestPayment({
											provider: 'wxpay',
											orderInfo: payInfo, //微信订单数据（Object类型）
											success: (res) => {
												this.loadData();
											},
											fail: (err) => {
												uni.hideLoading();
												this.$api.msg('支付失败！');
												this.isPay = true
											}
										});
									} else if (res.data.status == 0) {
										this.isPay = true
										this.$api.msg(res.data.msg);
									}
								},
								fail: (err) => {
									uni.hideLoading();
									this.isPay = true
									this.$api.msg('服务器开小差了呢，请您稍后再试');
								}
							})
						} else {
							this.isPay = true
							uni.showToast({
								title: '获取微信通道失败，请检查您的微信是否正常启用',
								icon: 'none'
							})
						}
					}
				});
			},
			
		},
		

	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: 30upx;
	}
</style>
<style lang="scss" scoped>
	/* 头部 */
	.carousel-section {
		position: relative;
		height: 300rpx;
		width: 94%;
		margin: 0 auto;
		border-radius: 20upx;
		background-color: #f3431a;
		// #ifdef APP-PLUS
		margin-top: 60rpx;
		// #endif

		// #ifdef H5
		// padding-top: 108rpx;
		// #endif

		// #ifdef MP-WEIXIN
		margin-top: 60rpx;
		// #endif
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-bottom: 42upx;

		.carousel-money {
			font-size: 60rpx;
		}
	}

	/* 快捷方式 */
	.cate-section {
		width: 94%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.cate-item {
			width: 218upx;
			height: 158upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 20upx;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;

			.cate-item-img {
				width: 70upx;
				height: 70upx;
				margin: 22upx 0 14upx;
			}

			.cate-item-text {
				font-size: 28upx;
				color: #FFFFFF;
			}
		}
	}

	.you {
		width: 11rpx;
		height: 20rpx;
		position: absolute;
		right: 42rpx;
		top: 36rpx;
	}

	.mark {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0rpx;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 2px -3px 100px -5px #FFFFFF;

		.banks-list {
			position: absolute;
			height: 280rpx;
			bottom: 0rpx;
			background-color: #fff;
			width: 100%;

			.banks-list-title {
				height: 102rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #ebebeb;
				position: relative;
			}

			.banks-list-content {
				padding: 30rpx 0;

				.banks-list-item {
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: center;
				}

			}

			.banks-list-button {
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
	.order-title-box {
		width: 100%;
		background-color: #ffffff;
		font-size: 30rpx;
		z-index: 100;
	
		.order-title {
			height: 78rpx;
			padding: 18rpx 100rpx 18rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
	
			.order-title-item {
				height: 42rpx;
			}
		}
	}
	.active {
		color: #f3431a !important;
		border-bottom: 1px solid #f3431a;
	}
	
	.list {
		font-size: $font-base;
		padding: 20rpx 15rpx 135rpx;
		.list-item {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 102rpx;
			border-radius: 10rpx;
			margin-bottom: 15rpx;
	
			.img-wrapper {
				width: 100%;
				height: 102rpx;
				position: relative;
				padding: 0 27rpx;
				border-bottom: 1px solid #f3f3f6;
	
				.img-wrapper-header {
					height: 102rpx;
					position: relative;
					line-height: 51rpx;
	
					.img-wrapper-line1,
					.img-wrapper-line2 {
						display: flex;
						justify-content: space-between;
					}
	
				}
	
			}
		}
	}
	
	
	
	.grid-dynamic-box {
			margin-bottom: 15px;
		}
	
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	
		.swiper {
			height: 420px;
		}
	
		/* #ifdef H5 */
		@media screen and (min-width: 768px) and (max-width: 1425px) {
			.swiper {
				height: 630px;
			}
		}
	
		@media screen and (min-width: 1425px) {
			.swiper {
				height: 830px;
			}
		}
	
		/* #endif */
		
		.submit-box {
			padding-bottom: 30rpx;
		
			.submit {
				width: 94%;
				margin: 0 auto;
				background-color: #f3431a;
				height: 74rpx;
				border-radius: 15rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
</style>
